<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./页面样式.css">
</head>

<body>
    <div class="box">
        <div class="shang">
            <img src="./fruit.jpg">
        </div>
        <p class="s1"><span class="iconfont icon-fangzi"></span>/购物车</p>
        <table style="border-collapse: collapse;">
            <thead>
                <tr>
                    <th>选中</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td><img src="./榴莲.png"></td>
                    <td></td>
                    <td>
                        <button onclick="jian()" style="width: 30px; height: 30px;">-</button>
                        <span><input type="text" style="width: 50px; height: 30px;" class="gs"></span>
                        <button onclick="jia()" style="width: 30px; height: 30px;">+</button>
                    </td>
                    <td></td>
                    <td><button style="color: white; background-color: red; width: 60px; height: 30px; border: none;">删除</button></td>
                </tr> -->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" class="s2"><input type="checkbox" name="" id="" onclick="qx()" class="fx"> 全选
                    </td>
                    <td colspan="2">总价 : ￥ <span style="color: rgb(255, 104, 180); font-size: 35px;" class="zj"></span>
                    </td>
                    <td><button
                            style="background-color: rgb(63, 133, 237); color: white; width: 100px;height: 40px; border: none;">结算<span
                                class="sl"></span></button></td>
                </tr>
            </tfoot>
        </table>
        <div class="kong">🛒空空如也</div>
    </div>
</body>

</html>
<script>
    const dataArr = [
        {
            id: 1,
            icon: './火龙果.png',
            isChecked: true,
            num: 2,
            price: 6,
        },
        {
            id: 2,
            icon: './荔枝.png',
            isChecked: false,
            num: 7,
            price: 20,
        },
        {
            id: 3,
            icon: './榴莲.png',
            isChecked: true,
            num: 3,
            price: 40,
        },
        {
            id: 4,
            icon: './鸭梨.png',
            isChecked: true,
            num: 10,
            price: 3,
        },
        {
            id: 5,
            icon: './樱桃.png',
            isChecked: false,
            num: 20,
            price: 34,
        },
    ]
    const tbody=document.querySelector('tbody')
    var fx=document.querySelector('.fx')
    function xr() {
        const strArr = dataArr.map((ele, index) => {
            return `
                <tr>
                    <td><input type="checkbox" name="" id="" ${ele.isChecked==true ? 'checked' : ''} class="fxs" onclick="f()"></td>
                    <td><img src="${ele.icon}"></td>
                    <td>${ele.price}</td>
                    <td>
                        <button onclick="jian(${index})" style="width: 30px; height: 30px;">-</button>
                        <span><input type="text" style="width: 50px; height: 30px;" class="gs" value="${ele.num}"></span>
                        <button onclick="jia(${index})" style="width: 30px; height: 30px;">+</button>
                    </td>
                    <td>${ele.price * ele.num}</td>
                    <td><button style="color: white; background-color: red; width: 60px; height: 30px; border: none;" onclick="del(${index})">删除</button></td>
                </tr>
            `
        }).join('')
        tbody.innerHTML=strArr
        const newArr=dataArr.filter(ele=>ele.isChecked)
        var zj=document.querySelector('.zj')
        var sl=document.querySelector('.sl')
        var pricee=newArr.reduce((prey,item)=>prey+item.price*item.num,0)
        zj.innerHTML=pricee.toFixed(2)
        sl.innerHTML=newArr.reduce((prey,item)=>prey+item.num,0)
        var kong=document.querySelector('.kong')
        kong.style.display=dataArr.length===0?'block':'none'
    }
    xr()
    function jian(index){
        if(dataArr[index].num>1){
        
            dataArr[index].num--
        }
        xr()
    }
    function jia(index){
        dataArr[index].num++
        xr()
    }
    function qx(){
        let fx=document.querySelector('.fx')
        var fxs=document.querySelectorAll('.fxs')
        for(let i=0;i<fxs.length;i++){
            if(fx.checked==true){
                dataArr[i].isChecked=true
            }else{
                dataArr[i].isChecked=false
            }
        }
        xr()
    }
    function del(index){
     dataArr.splice(index,1)
     xr()   
    }
    function f(){
    var fxs=document.querySelectorAll('.fxs')
    for(i=0;i<fxs.length;i++){
        var fxk=document.querySelectorAll('.fxs:checked')
            if(fxk.length==fxs.length){
                fx.checked=true
            }else{
                fx.checked=false
            }
    }
    console.log(fxk.length);
}
xr()
    
</script>
